<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
   
    <ui:composition template="template.xhtml">
           <ui:define name="top">
                <ui:include src="topMenu.xhtml"/>
           </ui:define>
           <ui:define name="content">
                  <div id="editCourseData">
                      <c:if test="${universitiesMB.successEdit}">
                              <div class="alert alert-success">
                                  <button type="button" class="close" data-dismiss="alert">x</button>
                                  Nodo(s) Actualizado(s) exitosamente
                              </div>
                      </c:if>   
                      <button class="btn  btn-info" data-toggle="modal" href="#createNode" >Nuevo</button>
                      <h2>Nodos actuales en el curso de #{editCourseMB.name()}</h2>
                      <h:form>
                      Descripción:
                      <script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,undo,redo,|,image,|,link,|,video",
        theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,forecolor,backcolor",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});
</script>
                      <h:inputTextarea class="span6" value="#{editCourseMB.description()}" id="description"/>
                      </h:form>
                      
                      <br/>
                      <h:dataTable class="table table-bordered table-striped" binding="#{nodeMB.table}" style="background-color: white;" value="#{nodeMB.nodesByCourse()}" var="node">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="ID"/>
                            </f:facet>
                            <h:outputText value="#{node.id}"/>
                        </h:column>
                        <h:column>
                               <f:facet name="header">
                                    <h:outputText value="Descripcion"/>
                               </f:facet>
                                    <h:outputText value="#{node.description}"/>
                        </h:column>
                        <h:column>
                               <f:facet name="header">
                                    <h:outputText value="Hijos"/>
                               </f:facet>
                            <h:outputText value="#{node.nodes.size()}"/>
                        </h:column>  
                        <h:column>
                               <f:facet name="header">
                                  <h:outputText value="Más"/>
                               </f:facet>
                            <h:form>
                                <img src="../img/icons/icon-delete.jpg"/>
                                <h:commandLink action="#{nodeMB.editFormList()}"> <h:graphicImage url="../img/icons/icon_edit.gif"/> </h:commandLink>
                                <h:commandLink action="#{nodeMB.viewFormList()}"> <h:graphicImage url="../img/icons/icon-details.gif"/> </h:commandLink>
                            </h:form>
                        </h:column>
                   </h:dataTable>  
                 </div>
               
               
                <!--Ventana Modal para vincular profesor-->
        <div id="createNode" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
          <a class="close" data-dismiss="modal">x</a>
          <h2>Crear Nodo</h2>
          <h:form>
            <h:outputText value="Descripción:"/>
            <br/>
            <h:inputTextarea class="span6" value="#{nodeMB.description}"/>
            <br/>
            <h:outputText value="Contenido:"/>
            <br/>
            <h:inputText class="span6" value="#{nodeMB.data}"/>
            <br/>
            <h:commandButton value="Crear" class="btn btn-info" actionListener="#{nodeMB.createNode()}"/>
          </h:form>
        </div>
        </div>       
           </ui:define>
</ui:composition>
   

</html>